<template>
  <div class="set-params" @click="$event => $event.stopPropagation()">
    <!--  header  -->
    <div class="header">
      <span class="popup-name">{{currentNode.name}}</span>
      <a-icon class="close-btn" type="close" @click="$emit('done')" />
    </div>
    <!--  body  -->
    <div class="description">
      <div class="table-container">
        <!-- 行过滤 -->
        <div>
          <div class="prompt-message">行过滤</div>
          <div  v-if="currentNode.data.input.length > 0">
            <div v-for="(group, index) in rowsFilter" :key="'group' + index"  class="ranks-filter-group">
              <!-- group box -->
              <div class="group-box">
                <div class="group-box-left">或</div>
                <div class="group-box-center">
                  <div v-for="(item, idx) in group" :key="'item' + idx" class="filter-item">
                    <!--  item box -->
                    <div class="filter-item-box">
                      <a-select v-model="item.fieldName" class="filter-select">
                        <a-select-option v-for="(column, sort) in currentNode.data.input[0].tableCols" :key="'select' + sort" :value="column">{{column}}</a-select-option>
                      </a-select>
                      <a-select v-model="item.condition" class="filter-select">
                        <a-select-option :value="'='">等于</a-select-option>
                        <a-select-option :value="'>'">大于</a-select-option>
                        <a-select-option :value="'>='">大于等于</a-select-option>
                        <a-select-option :value="'<'">小于</a-select-option>
                        <a-select-option :value="'<='">小于等于</a-select-option>
                      </a-select>
                      <div class="filter-input-box">
                        <a-input id="inputNumber" v-model="item.value" class="filter-input"/>
                      </div>
                      <a-icon-font type="iconzengjia" class="add-delete-icon" @click="addFilterItem(index)"/>
                      <a-icon-font type="icontianjiachengyuan" class="add-delete-icon" @click="deleteFilterItem(index, idx)"/>
                    </div>
                  </div>
                </div>
                <div class="group-box-right">
                  <a-icon-font type="iconicon-beifen5" @click="deleteFilterGroup(index)"/>
                </div>
              </div>
            </div>
            <div class="add-line-filter" @click="addFilterGroup">
              <a-icon type="plus"/>
              添加行过滤
            </div>
          </div>
          <div v-if="currentNode.data.input.length === 0" class="no-father-node">
            请先选择父节点
          </div>
        </div>
        <div class="horizontal-divider"></div>
        <!-- 列过滤 -->
        <div>
          <div class="prompt-message">
            <span class="filter-type-name">列过滤</span>
            <span v-if="currentNode.data.input.length > 0">
               <a-checkbox
                 :checked="currentNode.data.input[0].tableCols.length === columnsFilter.length"
                 @change="onCheckAllChange($event)"
               >
                全选
              </a-checkbox>
            </span>
          </div>
          <div  v-if="currentNode.data.input.length > 0" class="column-filter-input">
            <span
              v-for="(item2, index2) in currentNode.data.input[0].tableCols"
              :key="index2"
              class="checkbox-label"
            >
               <a-checkbox
                 :checked="columnsFilter.includes(item2)"
                 :value="item2"
                 @change="onChange($event)"
               >
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span>{{item2}}</span>
                    </template>
                    <span class="btn">
                       {{item2}}
                    </span>
                  </a-tooltip>
            </a-checkbox>
            </span>

          </div>
          <div v-if="currentNode.data.input.length === 0" class="no-father-node">
            请先选择父节点
          </div>
        </div>
      </div>
    </div>
    <!--  footer  -->
    <div class="buttons">
      <div class="btn import-btn" @click="confirm">确定</div>
      <div class="btn cancel-btn" @click="$emit('done')">取消</div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import {Prop} from 'vue-property-decorator'
import { cloneDeep } from 'lodash'

interface RowsFilterItem {
  fieldName: string,
  condition: string,
  value: string,
}

@Component
export default class EtlRanksFilter extends Vue {
  @Prop({
      type: Object,
      default: () => {return {}}
   })
  currentNode!: any
  public rowsFilter: any = []
  public columnsFilter: Array<any> = []
  public allInput: Array<string> = []

  public created() {
    this.allInput = cloneDeep(this.currentNode.data.input[0].tableCols)
    // 配置回显
    if(this.currentNode.data.rowsFilter.length === 0) {
      // const group: Array<any> = [
      //   {
      //     fieldName: '',
      //     condition: '>',
      //     value: '',
      //   }
      // ]
      // this.$set(this, 'rowsFilter', [group])
      this.rowsFilter = []
    }else {
      this.rowsFilter = this.currentNode.data.rowsFilter
    }
    this.columnsFilter = this.currentNode.data.columnsFilter
  }

  public mounted() {
    // (document.querySelector('.overlay') as HTMLDivElement).addEventListener('click', this.closePopup)
  }

  public closePopup() {
    this.$emit('done')
  }

  // 添加 行过滤 组
  public addFilterGroup() {
    const group: Array<RowsFilterItem> = [
      {
        fieldName: '',
        condition: '>',
        value: '',
      }
    ]
    this.$set(this.rowsFilter, this.rowsFilter.length, group)
  }

  // 删除 行过滤 组
  public deleteFilterGroup(index: number) {
    this.rowsFilter.splice(index,1)
  }

  // 添加 行过滤
  public addFilterItem(index: number) {
    if(this.rowsFilter[index].length < 2) {
      const item = {
        fieldName: '',
        condition: '>',
        value: '',
      }
      this.$set(this.rowsFilter[index], 1, item)
    }
  }

  // 删除 行过滤
  public deleteFilterItem(index: number, idx: number) {
    if(this.rowsFilter[index].length === 2) {
      this.rowsFilter[index].splice(idx,1)
    }
  }

  // 全选
  public onCheckAllChange($event: any) {
    this.columnsFilter =  $event.target.checked ? cloneDeep(this.allInput) : []
  }

  // 改变选中状态
  public onChange($event: any) {
    if($event.target.checked){
      const index =  this.columnsFilter.indexOf($event.target.value)
      if(index < 0) {
        this.columnsFilter.push($event.target.value)
      }
    }else {
      const index =  this.columnsFilter.indexOf($event.target.value)
      if(index > -1) {
        this.columnsFilter.splice(index, 1)
      }
    }
  }

  public confirm() {
    let status = true
    this.rowsFilter.forEach((item: Array<RowsFilterItem>) => {
      item.forEach((item2: RowsFilterItem) => {
        if(item2.fieldName === '' || item2.value === '') {
          status = false
        }
      })
    })
    if(this.columnsFilter.length === 0) {
      status = false
    }
    if (status) {
      this.$emit('confirm', {rowsFilter: this.rowsFilter, columnsFilter: this.columnsFilter})
    } else {
      this.$message.warning('请检查行过滤条件, 且列过滤不允许为空！')
    }

  }


}
</script>

<style lang="less" scoped>
@import '@/components/studio/data/popup/setParams';

.set-params.window {
  height: 60%;
  max-height: 600px;
  max-width: 800px;
  min-width: 500px;
  width: 40%;
}

/* 内容 */
.description {
  font-size: 16px;
  height: calc(100% - 109px);
  overflow-y: auto;
  padding: 12px 24px 0;

  &::-webkit-scrollbar {
    height: 10px;
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #333;
  }

  &::-webkit-scrollbar-corner {
    background: #179a16;
  }

  .table-container {
    .horizontal-divider {
      border-top: 1px solid #888;
      height: 1px;
      margin: 20px 0;
    }

    .prompt-message {
      margin-bottom: 12px;
    }
    /* 行过滤 外层组 包含逻辑符号 */
    .ranks-filter-group {
      align-items: flex-start;
      display: flex;
      flex-direction: column;
      width: 100%;
      /* 逻辑符号 */
      .group-logic-symbol {
        border: 1px solid #888;
        border-radius: 4px;
        height: 30px;
        line-height: 30px;
        margin: 3px 0;
        text-align: center;
        width: 60px;
      }
      /* 内层组 */
      .group-box {
        align-items: center;
        border: 1px solid #e9e9e9;
        border-bottom: 0;
        display: flex;
        padding: 5px 12px 5px 5px;
        width: 100%;

        .group-box-left {
          text-align: center;
          width: 6%;
        }

        .group-box-center {
          align-items: center;
          display: flex;
          flex-direction: column;
          width: 88%;

          .filter-item {
            width: 100%;

            .filter-item-box {
              align-items: center;
              display: flex;
              height: 58px;
              width: 100%;

              .filter-select {
                height: 32px;
                margin-right: 12px;
                width: 30%;
              }

              .filter-input-box {
                height: 32px;
                margin-right: 12px;
                width: 30%;

                .filter-input {
                  width: 100%;
                }
              }

              .add-delete-icon {
                margin-right: 12px;
              }
            }
          }
        }

        .group-box-right {
          align-items: center;
          display: flex;
          padding-left: 12px;
          width: 4%;
        }
      }

      input {
        background-color: transparent;
        border: 1px solid #d2d2d2;
        border-radius: 3px;
        margin-right: 5px;
        outline: none;
        width: 25%;
      }

    }

    .add-line-filter {
      border: 1px solid #e9e9e9;
      color: #6973ff;
      cursor: pointer;
      height: 40px;
      line-height: 40px;
      text-align: center;
      width: 100%;
    }

    .column-filter-input {
      align-items: center;
      display: flex;
      flex-wrap: wrap;

      .checkbox-label {
        display: inline-block;
        margin-bottom: 6px;
        padding-right: 12px;
        width: 20%;

        /deep/ .ant-checkbox-wrapper {
          align-items: center;
          display: flex;
          width: 100%;

          >span:last-child {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: calc(100% - 18px);

            .btn {
              display: inline-block;
              max-width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }

  }
}

.no-father-node {
  color: #888;
  font-size: 0.8rem;
  font-style: italic;
  padding: 15px 10px 0;
  text-align: center;

}

.filter-type-name {
  margin-right: 12px;
}

.row {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;

  .label {
    flex-basis: 25%;
  }

  .value {
    flex-basis: 75%;
  }
}

</style>
